<template>
  <div class="root">
    <div class="sspp">
      <a class="fanhui" @click="$router.back()"> </a>
      <span class="splb">我的E宠</span>
      <span class="cdl"></span>
    </div>
    <div class="lvnav">
      <div >
        <img @click="dengl" src="../assets/config.png" alt="" />
        <img @click="dengl" src="../assets/qipao.png" alt="" />
      </div>
      <div>
        <img @click="dengl"
          src="https://static.epetbar.com/static_wap/appmall/avatar/dog.png"
          alt=""
        />
        <span @click="dengl"> 登陆 |</span>
        <span @click="dengl"> 注册 </span>
      </div>
      <div>
        <img @click="dengl"
          src="https://img2.epetbar.com/nowater/2020-03/26/20/6d8345b33a49f167e41bf957b05c376b.png"
          alt=""
        />&nbsp;
        <img @click="dengl"
          src="https://img2.epetbar.com/nowater/2020-03/26/16/1c5bc04e8dd28cfd30211f75f7ca90ee.png"
          alt=""
        />&nbsp;
        <img @click="dengl"
          src="https://img2.epetbar.com/nowater/2019-01/31/14/de8b18448de149a49288d3a2f6be91fe.png"
          alt=""
        />
      </div>

      <div class="bjh">
        <div class="gwgn">
          <div @click="dengl">
            <img
              src="https://img2.epetbar.com/nowater/2021-09/01/11/1c86693ca1e94b9a91b56b4dd29a6473.png"
              alt=""
            />
            <p>待付款</p>
          </div>
          <div @click="dengl">
            <img
              src="https://img2.epetbar.com/nowater/2021-09/01/11/46610f91890c45fb713df5d6d846033e.png"
              alt=""
            />
            <p>待收货</p>
          </div>
          <div @click="dengl">
            <img
              src="https://img2.epetbar.com/nowater/2021-09/01/12/323228944d6b62ba74f3e2aa12bc71bd.png"
              alt=""
            />
            <p>评价有礼</p>
          </div>
          <div @click="dengl">
            <img
              src="https://img2.epetbar.com/nowater/2021-09/01/11/02cf58daf891e44908be2c3b06b5fa4e.png"
              alt=""
            />
            <p>客服中心</p>
          </div>
          <div @click="dengl">
            <img
              src="https://img2.epetbar.com/nowater/2021-09/01/10/6d3d5fa72f33744b2a7d7c929850a5b5.png"
              alt=""
            />
            <p>全部订单</p>
          </div>
        </div>
        <div class="gwgn">
          <div @click="dengl">
            <p>0</p>
            <p>优惠券</p>
          </div>
          <div @click="dengl">
            <p>0.00</p>
            <p>余额</p>
          </div>
          <div @click="dengl">
            <p>0</p>
            <p>E宠币</p>
          </div>
          <div @click="dengl"> 
            <p>0.00</p>
            <p>红包</p>
          </div>
        </div>
        <div class="gjyfw">
          <div>
          <img src="https://img2.epetbar.com/nowater/2020-09/28/16/5aa7c96794f058eeb11a4425f7922f15.png" alt="">
            <img
              src="https://img2.epetbar.com/nowater/2021-09/03/17/bd6d00c3fa690f2e403104017e3a861a.png"
              alt=""
            />
          </div>
          <div class="">
            <div @click="dengl" v-for="(v,i) in gjfw" :key="i">
              <img
                :src="v.imgUrl"
                alt=""
              />
              <p>{{v.title_name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mtkde" v-show="isdl">
      <div>
        <div>
          您还未登录，请先登录
        </div>
        <div>
          <div @click="qudl">取消</div>
          <div>确定</div>
        </div>
      </div>
    </div>
    <buttomtab :selectNav="5" class="budnav"></buttomtab>
  </div>
</template>

<script>
import buttomtab from "../components/buttomtab.vue";

export default {
  name: "iechong",
  data() {
    return {
      gjfw: [
        {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/8f22d23be143555dee42e65bd3480516.png",
          title_name: "周期配送",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/c7bd70f9d04b387d5058553018986ab2.png",
          title_name: "我的钱包",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/f029b5ade95a6b48078d262b0789cbe6.png",
          title_name: "客服中心",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/d87e31df7cb093e74312eabb3564ce56.png",
          title_name: "自助售后",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/b3c11edd74255d9de2fe903817085775.png",
          title_name: "我的预售",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/a8bda976e3c13c7d8502d736d28ac277.png",
          title_name: "我的团购",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/7532fddca3c9fd7c37d67ad54734a20c.png",
          title_name: "我的拉新",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/8e5fd4592fd18a5e18085f36c320743f.png",
          title_name: "我的兑换",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/e71dac4011ca5dae7c6bcc2cdd6e667d.png",
          title_name: "我的关注",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/3434a10e45a9871ee21adf85e798f1ae.png",
          title_name: "我的捐赠",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/d323af719b71ec4b0bc0cac6a3b00c23.png",
          title_name: "邀好友",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/d8a6040c83bc263444e14152081e808b.png",
          title_name: "潮品预售",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/449d7cdd39d79ff54a15c8ecaeef5146.png",
          title_name: "我的收藏",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/f8644879dc026743c582f8b9345ff5ab.png",
          title_name: "我的咨询",
        },
         {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/64433f93f2540ec9a2507779d7e614fb.png",
          title_name: "我的现金券",
        },
          {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/61a6d0fe30d72fecca4b96b8a990a887.png",
          title_name: "优惠券",
        },
          {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/f0a30471d8b62be6b1140e403cd17f70.png",
          title_name: "十克关爱",
        },
          {
          imgUrl: "https://img2.epetbar.com/nowater/2021-09/02/10/820795cf4c2761f3e49dcba4addbdaaf.png",
          title_name: "隐私条款",
        },
      ],
      isdl:false
    };
  },
  methods: {
    dengl(){
        this.isdl=true
    },
    qudl(){
      this.isdl = false
    }

  },
  components: {
    buttomtab,
  },
};
</script>

<style lang="less" scoped>
.mtkde{
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background-color: rgba(0, 0, 0, 0.603);
  >div{
    width: 6rem;
    height: 2.66rem;
    font-size: .3rem;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
    border-radius: .06rem;
    >div:nth-child(1){
      display: inline-block;
     line-height: 1.7rem;
      width: 100%;
      text-align: center;
    }
      >div:nth-child(2){
      width: 100%;
      display: flex;
      justify-content: space-between;
      >div{
        display: inline-block;
        line-height: .96rem;
        width: 50%;
        text-align: center;
        outline: .02rem solid rgb(212, 212, 212);
      }
       >div:nth-child(2){
      color: rgb(12, 190, 6);
      }
    }
  }
}

.bjh {
  background-color: rgb(246, 246, 246);
  padding: 0 0.2rem;
  padding-bottom: 1.3rem;
  overflow: hidden;
  .gwgn {
    width: 100%;
    height: 2.36rem;
    margin-top: 0.4rem;
    background-color: #fff;
    display: flex;
    border-radius: 0.3rem;
    box-sizing: border-box;
    padding-top: 0.55rem;
    > div {
      width: 20%;
      text-align: center;
      > img {
        width: 0.5rem;
      }
      > p {
        margin: 0;
        font-size: 0.24rem;
      }
      > p:nth-child(1) {
        margin: 0.4rem;
        font-size: 0.28rem;
        font-weight: 700;
        color: red;
      }
    }
  }
  .gjyfw{
  padding: .2rem;
  border-radius: 0.3rem;

  width: 100%;
  box-sizing: border-box;
  margin-top: .4rem;
  background-color: #fff;
   >div:nth-child(1){
     display: flex;
     justify-content: space-between;
    >img:nth-child(1){
      width: 1.7rem;
    }
     >img:nth-child(2){
      width: .2rem
    }
   }
  >div:nth-child(2){
    display: flex;
    flex-wrap: wrap;
    >div{
      width: 25%;
      text-align: center;
      >img{
        width: .4rem;
      }
      >p{
        font-size: .24rem;
        margin: 0;
      }
    }
  }
}
}
.lvnav {
  width: 100%;
  height: 4.14rem;
  background-color: rgb(70, 206, 87);
  > div:nth-child(1) {
    display: flex;
    padding: 0.2rem;
    justify-content: space-between;
    > img {
      width: 0.48rem;
    }
  }
  > div:nth-child(2) {
    height: 1.4rem;
    padding: 0.2rem;
    img {
      width: 1.4rem;
    }
    > span {
      font-size: 0.3rem;
      position: relative;
      top: -45%;
      left: 0.2rem;
      color: #fff;
    }
  }
  > div:nth-child(3) {
    width: 7.1rem;
    height: 0.712rem;
    margin: 0 auto;
    background-color: rgb(0, 0, 0);
    box-sizing: border-box;
    padding: 0.2rem;
    margin-top: 0.735rem;
    display: flex;
    border-radius: 0.3rem 0.3rem 0 0;
    > img {
      width: 1.28rem;
      height: 0.3rem;
    }
  }
}
.budnav {
  position: fixed;
  background-color: #fff;
  width: 100%;
  left: 0;
  bottom: 0;
}
.sspp {
  background-color: #fff;
  font-size: 0.2rem;
  text-align: center;
  > .splb {
    display: inline-block;
    width: 2rem;
    line-height: 1rem;
    margin: 0 auto;
    font-size: 0.34rem;
  }
}
.fanhui {
  margin: 0;
  position: absolute;
  left: 0.1rem;
  width: 0.7rem;
  height: 0.7rem;
  top: 0.14rem;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 0.7rem auto;
  background-position: 0 0;
}

.cdl {
  margin: 0;
  top: 0.14rem;
  right: 0.1rem;
  width: 0.7rem;
  height: 0.7rem;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 0.7rem auto;
  position: absolute;
  background-position: 0 -1.4rem;
}
</style>